<template>
  <div class="register-page">
    <div class="container">
      <a href="/#/index">
        <img src="/imgs/login-logo.png" alt />
      </a>
    </div>
    <div class="wrapper">
      <div class="wrap">
        <div class="layout">
          <div class="external_logo_area">
            <a class="milogo" href="javascript:void(0)"></a>
          </div>
          <div class="tit-reg">注册小米帐号</div>
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="80px"
            class="demo-ruleForm"
            :label-position="labelPosition"
          >
            <el-form-item label="用户名" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
              <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
              <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
            </el-form-item>

            <div class="qr-input-group">
              <el-form-item label="验证码" prop="yzm">
                <el-input v-model="ruleForm.yzm" class="qrinput"></el-input>
              </el-form-item>
              <ver-code @refresh_yzm="refresh" ref="vercode"></ver-code>
            </div>

            <el-form-item prop="argument">
              <el-checkbox v-model="ruleForm.checked" class="checkbox-xm">
                已阅读并同意：
                <a href="javascript:;">用户协议</a> 和
                <a href="javascript:;">隐私政策</a>
              </el-checkbox>
            </el-form-item>

            <!-- <el-button @click="submitForm('ruleForm')" class="submit-btn">立即注册</el-button> -->
            <btn-circle @addClick="submitForm('ruleForm',$event)">
              <template v-slot:tit>
                <span>立即注册</span>
              </template>
            </btn-circle>
          </el-form>
        </div>
      </div>
    </div>
    <nav-footer></nav-footer>
  </div>
</template>
<script>
import NavFooter from "./../components/NavFooter";
import { form, formItem, Input, Button, Checkbox } from "element-ui";
import BtnCircle from "./../components/btn_circle";
import VerCode from "./../components/veri_code";
export default {
  name: "register",
  components: {
    NavFooter,
    BtnCircle,
    VerCode,
    [form.name]: form,
    [formItem.name]: formItem,
    [Button.name]: Button,
    [Input.name]: Input,
    [Checkbox.name]: Checkbox
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    //  勾选协议验证：
    var validateCheck = (rule, value, callback) => {
      if (!this.ruleForm.checked) {
        callback(new Error("请勾选该协议"));
      } else {
        callback();
      }
    };
    // 自定义验证码验证：
    var validateYzm = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请输入验证码"));
      } else if (value !== this.yzm.join("")) {
        this.$refs.vercode.Refresh();
        callback(new Error("验证码输入错误"));
      } else {
        callback();
      }
    };
    return {
      yzm: "",
      labelPosition: "left",
      formLabelAlign: {
        name: "",
        region: "",
        type: ""
      },
      ruleForm: {
        pass: "",
        checkPass: "",
        name: "",
        checked: false,
        yzm: ""
      },
      rules: {
        pass: [{ validator: validatePass, required: true, trigger: "change" }],
        checkPass: [
          { validator: validatePass2, required: true, trigger: "change" }
        ],
        yzm: [
          {
            validator: validateYzm,
            trigger: "submit"
          }
        ],
        name: [
          { required: true, message: "请输入用户名", trigger: "change" },
          {
            min: 1,
            max: 20,
            message: "用户名长度在 1 到 20 个字符",
            trigger: "blur"
          }
        ],
        argument: [
          {
            validator: validateCheck,
            trigger: "change"
          }
        ]
      }
    };
  },
  mounted() {
    this.yzm = this.$refs.vercode.show_num;
  },
  methods: {
    submitForm(formName, $event) {
      // 打出子组件的数据看看：
      console.log($event);
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.axios
            .post("/user/register", {
              username: this.ruleForm.name,
              password: this.ruleForm.pass
            })
            .then(res => {
              this.$message.success("注册成功");

              this.$router.push({
                name: "index",
                params: {
                  from: "register"
                }
              });
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    refresh(val) {
      this.yzm = val;
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  height: 113px;

  img {
    width: auto;
    height: 100%;
  }
}
.wrapper {
  width: 100%;
  min-height: 100%;
  height: auto;
  display: -webkit-box;
  display: box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -o-box;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-box-align: center;
  box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  box-pack: center;
  -ms-flex-pack: center;
  background: #f9f9f9;
}
.wrap {
  padding: 80px;
}
.layout {
  width: 854px;
  margin: 0 auto;
  padding-bottom: 70px;
  background-color: #fff;
}
.external_logo_area {
  padding-bottom: 40px;
  display: block;
}
.milogo {
  width: 49px;
  height: 48px;
  margin: 0 auto;
  display: block;
  cursor: default;
  background-image: url(https://account.xiaomi.com/static/res/349d9c1/account-static/respassport/acc-2014/img/milogo.png);
}
.tit-reg {
  font-size: 30px;
  text-align: center;
}
.demo-ruleForm {
  width: 500px;
  margin: 0 auto;
  margin-top: 40px;
}
.checkbox-xm {
  color: #9d9d9d;
  a {
    .c3;
    font-weight: bold;
  }
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: inherit;
}
.qrinput {
  width: 180px;
}
.qr-input-group {
  .flex-row-nowrap(flex-start);
}
</style>
